<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">

    <title>圍与連</title>

    <script type="text/javascript" src="wgo/wgo.js"></script>
    <script type="text/javascript" src="wgo/kifu.js"></script>
    <script type="text/javascript" src="wgo/sgfparser.js"></script>
    <script type="text/javascript" src="wgo/player.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.component.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.infobox.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.commentbox.js"></script>
    <script type="text/javascript" src="wgo/basicplayer.control.js"></script>
    <script type="text/javascript" src="wgo/player.editable.js"></script>
    <script type="text/javascript" src="wgo/scoremode.js"></script>
    <script type="text/javascript" src="wgo/player.permalink.js"></script>

    <link rel="stylesheet" type="text/css" href="./CSS/style.css"/>
    <link rel="stylesheet" type="text/css" href="./CSS/index.css"/>

</head>
<body>

<div class="container">
    <div class="row">

        <div class="span9">
            <div class="player wgo-player-main wgo-medium show wgo-player-main wgo-twocols wgo-large"
                 data-wgo="./SGF/23.5.2017-Wuzhen-KeJie-Alphago.sgf"  data-wgo-board="stoneHandler: WGo.Board.drawHandlers.SHELL" id="wgo_0">
            </div>
        </div>

        <div class="span3">
            <h1>韋氏圍碁</h1>
            <p>
                始于初探, 终于对称;<br>
                人在平衡, 机巧牺牲;<br>
                来而往复, 終获真知。
            </p>

            <div id="choose-game" class="show">
                <form action="./index.html" method="get" target="_blank">
                    Choose a saved game file:
                    <select id="gameMode">
                        <option value="./SGF/23.5.2017-Wuzhen-KeJie-Alphago.sgf">AlphaGo vs KeJie
                            (Match 1)
                        </option>
                        <option value="./SGF/25.5.2017-Wuzhen-KeJie-Alphago.sgf">AlphaGo vs KeJie
                            (Match 2)
                        </option>
                        <option value="./SGF/27.5.2017-Wuzhen-KeJie-Alphago.sgf" selected="true">
                            AlphaGo vs KeJie (Match 3)
                        </option>
                    </select>
                    <input type="submit" value="确认" />
                </form>
            </div>

        </div>

    </div>
</div>

<script>
    var domain = 'future-of-go';
    var context = '/deepmind-media/alphago/sgf-files';
    var matches = [
        {
            'title': 'AlphaGo vs Ke Jie (Match 1)',
            'url': context + '/english/alphago-kejie/alphago_kejie_1.sgf'
        },
        {
            'title': 'AlphaGo vs Ke Jie (Match 2)',
            'url': context + '/english/alphago-kejie/alphago_kejie_2.sgf'
        },
        {
            'title': 'AlphaGo vs Ke Jie (Match 3)',
            'url': context + '/english/alphago-kejie/alphago_kejie_3.sgf'
        },
        {
            'title': 'Pair Go',
            'url': context + '/english/alphago-pairgo/alphago_pairgo.sgf'
        },
        {
            'title': 'Team Go',
            'url': context + '/english/alphago-teamgo/alphago_teamgo.sgf'
        },
    ];

<script>
    var CONTAINER_ELEMENT_SELECTOR = 'body';
    var targetContainer = document.querySelector(CONTAINER_ELEMENT_SELECTOR);
    window.addEventListener('message', function (e) {
        var data = JSON.parse(e.data)
        if (!data.type === 'requestDimensions') return;
        var messageId = data.messageId
        var dimensions = {
            width: targetContainer.clientWidth,
            height: targetContainer.clientHeight + 10
        }
        window.parent.postMessage(JSON.stringify({
            type: 'requestDimensions',
            messageId: messageId,
            dimensions: dimensions
        }), '*');
    }, false);
</script>

</body>
</html>